<template>
  <div id="User">
    <!-- 面包屑组件 -->
    <el-bread-crumb secondtitle="用户管理" thirdtitle="用户列表"></el-bread-crumb>

    <!-- 卡片组件 -->
    <el-card>
      <!-- 搜索框和按钮 -->
      <template v-slot:searchInput>
        <el-input-search ref="inputSearch"></el-input-search>
      </template>

      <!-- 表格 -->
      <template v-slot:table>
        <el-table :userList.sync="userList"></el-table>
      </template>

      <!-- 分页组件 -->
      <template v-slot:pagination>
        <el-pagination 
        :nowPage.sync="nowPage"
        :total.sync="total"
        :pageNumber.sync="pageNumber"></el-pagination>
      </template>

      <!-- 弹出框-添加用户组件 -->
      <template v-slot:dialog>
        <el-dialog></el-dialog>
        <el-dialogUpdate></el-dialogUpdate>
        <distribute-user-dialog></distribute-user-dialog>
      </template>
    </el-card>
    
  </div>
</template>

<script>
// 引入组件
import ElBreadCrumb from '@/components/common/ElBreadCrumb'; // 面包屑组件
import ElCard from '@/components/Main/ElCard'; // 卡片组件
import ElInputSearch from '@/components/Main/ElInputSearch';  // 搜索框组件
import ElTable from '@/components/Main/ElTable'; // 表格组件
import ElPagination from '@/components/Main/ElPagination'; // 分页组件
import ElDialog from '@/components/Main/ElDialog';
import ElDialogUpdate from '@/components/Main/ElDialogUpdate';
import DistributeUserDialog from '@/views/Main/User/DistributeUserDialog';

// 引入请求方法
import { getUserListData } from '@/network/homeRequest';

export default {
  name: 'User',
  data() {
    return {
      userList: [],
      nowPage: 1, // 请求第几页
      pageNumber: 5, // 页面总数
      total: 0, // 全部个个数
    }
  },
  created() { // 初始化之后执行
    this.$bus.$on('getUserList', (query) => { // 分页组件触发
      if (query) { // 有query值触发
        this.getUserList(this.nowPage, this.pageNumber, query);
        return;
      }
      this.getUserList(this.nowPage, this.pageNumber); // 触发无query值的请求
    });
    
  },
  mounted() {
    this.getUserList(this.nowPage, this.pageNumber); // 获取userList方法
  },
  destroyed() { // 组件销毁后执行
    this.$bus.$off('getUserList'); // 注销事件
    
  },
  methods: {
    async getUserList(nowPage, pageNumber) { // 获取UserList、total、pagenum
      const { data, meta: info } = await getUserListData(nowPage, pageNumber, this.$refs['inputSearch'].query);
    
      // console.log(info);
      
      if (info.status !== 200) { // 网络错误问题
        return this.$message({
          showClose: true,
          message: '用户列表获取失败, 请检查网络问题！',
          type: 'error'
        });
      }

      // 访问成功
      this.userList = data.users;
      this.total = data.total;
      this.nowPage = data.pagenum;
    }
  },
  components: {
    ElBreadCrumb,
    ElCard,
    ElInputSearch,
    ElTable,
    ElPagination,
    ElDialog,
    ElDialogUpdate,
    DistributeUserDialog
  }
}
</script>

<style lang="scss" scoped>

</style>